<template>
   <div id="app">


     <input v-model="name"/>
     {{name}}
   <p>原始数据：{{data}}</p>
   <p>计算属性后：{{reverdata}}</p>

     <span @mousemove="fla=!fla" @mouseleave="fla=!fla" :style="fla?'color:red':''">姓名{{xingming}}</span>
     <span>姓{{xing}}</span>
     <span>名{{ming}}</span><br/>

     <router-link to="/hello">go to foo</router-link>
     <!--<router-view></router-view>-->
     <hello></hello>
     <headd></headd>

     <button @click="show=!show">点我</button>
     <transition name="slide-fade" >
       <div v-if="show" :style="styleobj">  过渡动画</div>
     </transition>
   </div>

</template>
<script>
  import HelloWorld from '@/components/HelloWorld'
  import head from '@/components/header'

    export default {
        name: "firstPage",
      data(){
          return {
            name:"花花",
            data:'hello',
            xing:'哈',
            ming:"比",
            fla:false,
            show:true,
            styleobj:{
              color:"red",
              fontSize:"20px"
            }
          }
      },

      methods:{

      },

      components:{

        hello: HelloWorld,
        headd:head

      },
      computed:{
        reverdata:function () {
          return this.data.split('').reverse().join('')
        },
        xingming:{
          set:function () {
            var names=xingming
            this.xing=xingming.substr(0,1)
            this.ming=xingming.substr(1)
          },
          get:function () {
            return this.xing+this.ming
          }
        }

      },
   beforeCreate:function () {
     console.log("beforeCreated"+this.name)
   },
      created:function () {
        console.log("created"+this.name)
      },
      beforeMount(){
          console.log("beforeMout"+this.name)
      },
      mounted(){
          console.log("mounted"+this.name)
      },
      beforeUpdate(){
      console.log("数据更新前"+this.name)
    },
      updated(){
          console.log("数据更新"+this.name)
      },
      beforeDestroy(){
          console.log("销毁前"+this.name)
      },
      destroyed(){
          console.log("销毁"+this.name)
      }
  }
</script>
<style scoped>
  a:-webkit-any-link {
    text-decoration:none;
    color: #2c3e50;

  }


  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
